<template>
  <div>
    <quill-editor
    class="editor"
      v-model="content"
      ref="myQuillEditor"
      :options="editorOption"
      @blur="onEditorBlur($event)"
      @focus="onEditorFocus($event)"
      @change="onEditorChange($event)"
    >
    </quill-editor>
  </div>
</template>
<script>
import { quillEditor } from 'vue-quill-editor'
export default {
  name: 'quill',
  props: {
    /* 编辑器的内容 */
    question: {
      type: String,
      default: ''
    },
    answer: {
      type: String,
      default: ''
    }
  },
  components: {
    quillEditor
  },
  watch: {
    question (nweval, oldval) {
      this.question = nweval
      //   console.log(this.question)
      this.content = this.question
    },
    answer (nweval, oldval) {
      this.answer = nweval
      //   console.log(this.answer)
      this.content = this.answer
    }
  },
  data () {
    return {
      content: this.question || this.answer || '',
      editorOption: {
        placeholder: '请在这里输入',
        modules: {
          toolbar: [
            ['bold', 'italic', 'underline', 'strike'], // 加粗，斜体，下划线，删除线
            // [{ header: 1 }, { header: 2 }], // 标题，键值对的形式；1、2表示字体大小
            [{ list: 'ordered' }, { list: 'bullet' }], // 列表
            ['blockquote', 'code-block'], // 引用，代码块
            ['image', 'link'] // 上传图片、上传视频
          ]
        }
      }
    }
  },
  methods: {
    onEditorBlur () {
      // 失去焦点事件
    },
    onEditorFocus () {
      // 获得焦点事件
    },
    onEditorChange () {
      // 内容改变事件
      this.$emit('changeQuestion', this.content)
      this.$emit('changeAnswer', this.content)
    }
  }
}
</script>
<style scoped>
.editor{
height: 130px;
}
</style>
